[CSS] box-sizing 속성 설정하기, 레이어 크기 결정 방식 선택

만약 네모난 영역의 요소가 존재하고 그 영역의 크기가 width 값이 300px 그리고 height 값이 300px 이라고 가정해보겠습니다. 이때 정해진 width 값과 height 값은 내부의 padding 또는 border에 영향을 받아 사용자가 설정한 위 값보다 더 커지는 경우가 생길 수 있습니다. 이 때 css의 box-sizing 속성은 박스 형태 레이어는 크기를 결정하는 방법을 결정하며 내부 영역의 padding, border 값을 전체 width 또는 height에 포함시킬지를 선택할 수 있게합니다.

box-sizing 속성은 해당하는 영역의 크기를 어떻게 결정할 것인지 선택할 수 있습니다. 이때 선택 가능한 값은 아래와 같으며 이 CSS를 사용하면 다양한 형태의 레이아웃을 구성하는데 매우 도움이 됩니다.

! box-sizing 속성 선택 가능 값

box-sizing: content-box;
// 기본 설정값으로 padding, border 영역을 제외한 크기를 width, height로가짐

box-sizing: border-box;
// padding 또는 border 영역을 포함하여 width, height를 결정



여기서, content-box는 기본값입니다. border-box를 사용할 경우 내부 레이어의 고정된 값에 영향을 미치는 다른 요소를 배제할 수 있습니다. 즉 border-box를 사용하면 언제든지 똑같은 크기를 가지는 레이아웃을 만들 수 있다는 큰 장점이 있습니다. 다시 말해 width 200px로 설정시 항상 200px을 유지해줍니다. 이를 사용하면 레이아웃을 만들때 border 또는 padding의 크기에 영향없이 동일한 크기를 가지는 엘리먼트를 만들 수 있습니다. 아래는 이해를 돕기 위한 그림입니다.

그림) css의 border-box에 대한 설명
그럼 예제를 통해 알아볼까요? 만약 width 200px, height 200px을 가지는 레이어 영역의 박스를 만들었다고 가정해봅니다. 코드는 아래와 같을 것입니다.


위 css는 width, height 이외에 padding: border 값을 가지고 있습니다. 이 경우 우리가 의도한 가로 세로 200px, 200px의 박스 엘리먼트를 성공적으로 만들어질까요? 물론 아닙니다. 다른 css 속성값 border 그리고 padding에 영향을 받기 때문입니다. 이런 경우 border-box를 사용하여 다시 코드를 작성해 보겠습니다. 아래를 봐주세요.
위 세번째 선언된 css 속성에 의하여 원하는 값을 가지는 요소를 만들 수 있습니다. 위에 속성에 따라 해당 content 영역의 width는 200px, height: 200px이 될 것입니다. 여기서 주목할 속성은 바로 box-sizing 입니다.
추가된 속성에 의해 화면에 출력되는 레이어의 크기는 200px로 고정되며 다른 속성값에 영향을 받지 않게됩니다. 이 속성을 지정하게 되면 결과적으로 내부 공간이 줄어드는 현상이 나타납니다. 다시말해 다른 고정된 width, height를 얻을 수 있지만 border 그리고 padding의 크기만큼 내부 영역은 그 만큼 작아지게 되는 것이지요.

이 속성을 사용하면 반응형웹을 구현하는데 좀 더 쉽게 구현할 수 있습니다. 그 이유는 요소들이 border, padding에 의해여 계속 바뀌게 되면 반응형웹을 구현하기 위해 설정해야 하는 값들의 변수가 너무나 많아지기 때문입니다. 그렇기 때문에 습관적으로 이 속성을 border-box로 설정하는 것이 매우 좋을 것입니다.